<template>
  <div class="jewellery">
    <!--baoshi
    <counter></counter>-->
    <div class="sales-board">
            <div class="sales-board-intro">
                <h2>珠宝专柜</h2>
                <p>对于男人们来说，一辈子的奋斗就是为了能够让自己的女人带上世界上最漂亮的珠宝首饰，而对于女人来说，带上爱人为自己精心挑选的珠宝首饰，幸福是多么的不言而喻。。。下面就让我们一起来了解这些至美尤物吧！</p>
            </div>
            <div class="sales-board-form">
                <div class="sales-board-line">
                    <div class="sales-board-line-left">
                      购买数量：
                    </div>
                    <div class="sales-board-line-right">
                      <counter @on-change="getInfo('num',$event)" :max="maxCounter" :min="minCounter"></counter>
                    </div>
                </div>

                <div class="sales-board-line">
                    <div class="sales-board-line-left">
                      包装方案：
                    </div>
                    <div class="sales-board-line-right">
                      <selector @on-packing="getInfo('package',$event)" :selections="selectorData"></selector>
                    </div>
                </div>

                <div class="sales-board-line">
                    <div class="sales-board-line-left">
                      首饰类型：
                    </div>
                    <div class="sales-board-line-right">
                       <caketype @on-type="getInfo('type',$event)" :chooses="chooseData"></caketype>
                    </div>
                </div>

                <div class="sales-board-line">
                    <div class="sales-board-line-left">
                    </div>
                    <div class="sales-board-line-right">
                      {{ getTotalPrice }}元
                    </div>
                </div>

                <div class="sales-board-line">
                    <div class="sales-board-line-left">
                    </div>
                    <div class="sales-board-line-right">
                      <a href="javascript:;" class="button" @click="buy">立即购买</a>
                    </div>
                </div>

            </div>
            <div class="sales-board-des">
                <h3>项链</h3>
                <p>
采用珍贵的925银、14k金和创新粉色调PANDORA Rose材质制作，PANDORA项链最适宜搭配您的精选吊坠-或作为简洁而时尚的经典款式日常佩戴。</p>
                <h3>戒指</h3>
                <p>
                PANDORA戒指采用富有光泽的金属-14K金、925银和PANDORA Rose精心制作。  手工制作的戒指以丰富多样的传统和现代化闪石镶嵌技术、独特装饰细节为特色。 
                </p>
                <h3>手链</h3>
                <p>
PANDORA手链系列精选各种美丽而恒久的材质，以手工精制而成，可搭配各种吊饰，纤细的外形在腕间彰显着时尚。
                </p>
            </div>
        </div>
  </div>
</template>

<script>

import counter from "../../../components/counter"
import selector from "../../../components/selector"
import caketype from "../../../components/caketype"

export default {
  name:"jewellery",
  data(){
    return{
      totalPrice:0,
      minCounter:0,
      maxCounter:100,
      selectorData:[
        {
          label:"简约包装",
          value:0
        },
        {
          label:"精美包装",
          value:1
        },
        {
          label:"豪华包装",
          value:2
        }
      ],
      chooseData:[
        {
          label:"项链",
          value:1
        },
        {
          label:"戒指",
          value:2
        },
        {
          label:"手链",
          value:3
        }
      ]
    }
  },
  created(){
    this.totalPrice = 0;
  },
  components:{
    counter,
    selector,
    caketype
  },
  methods:{
    buy(){
      alert("购买成功")
    },
    // getNumber(data){
    //   this.totalPrice = data * 100;
    // },
    // getPackage(data){
    //   this.totalPrice += data * 50
    // },
    // getType(data){
    //   this.totalPrice += (data+1) * 100
    // },
    getInfo(key,data){
      this[key] = data; // num  package  type
      let buyObj = {
        "num":this.num,
        "package":this.package | 0,
        "type":this.type | 0
      }
        // this.totalPrice = buyObj.num * 100 + buyObj.package * 50 + (buyObj.type+1) * 200;
      // this.totalPrice = this.$store.getters.getPrice;
    }
  },
  computed:{
    getTotalPrice(){
      return this.$store.getters.getPrice;
    }
  }
}
</script>

<style scoped>
.sales-board {
  background: #fff;
}
.sales-board-form {

}
.sales-board-intro h2 {font-size: 20px;
  padding: 20px;
}
.sales-board-intro p {
  background: #f7fcff;
  padding: 10px 20px;
  color: #999;
  line-height: 1.8;
}
.sales-board-form {
  padding: 30px 20px;
  font-size: 14px;
}
.sales-board-line {
  clear: both;
  padding-bottom: 20px;
}
.sales-board-line-left {
    display: inline-block;
    width: 100px;
}
.sales-board-line-right {
    display: inline-block;
    width: 75%;
}
.sales-board-des {
  border-top: 20px solid #f0f2f5;
  padding: 15px 20px;
}
.sales-board-des p {
  line-height: 1.6;
}
.sales-board-des h2 {
  font-size: 20px;
  padding-bottom: 15px;
}
.sales-board-des h3 {
  font-size: 18px;
  font-weight: bold;
  padding: 20px 0 10px 0;
}
.sales-board-des li {
  padding: 5px 0;
}
.sales-board-table {
  width: 100%;
  margin-top: 20px;
}
.sales-board-table th {
  background: #4fc08d;
  color: #fff;
}
.sales-board-table td {
    border: 1px solid #f0f2f5;
    padding: 15px;
}
h3{
  margin-top: 30px;
}
.buy-dialog-title {
  font-size: 16px;
  font-weight: bold;
}
.buy-dialog-btn {
  margin-top: 20px;
}
.buy-dialog-table {
  width: 100%;
  margin-bottom: 20px;
}
.buy-dialog-table td,
.buy-dialog-table th{
  border: 1px solid #e3e3e3;
  text-align: center;
  padding: 5px 0;
}
.buy-dialog-table th {
  background: #4fc08d;
  color: #fff;
  border: 1px solid #4fc08d;
}
.button {
  background: #4fc08d;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}
.button:hover {
  background: #4fc08d;
}
</style>

